<template>
	<view class="money-missPage">
		
		<view class="heads">
			<h3>{{$t('money.head.title')}}</h3>
	<swiper   :interval="3000" :duration="1000" class="swiper1" circular="true" next-margin="70px" previous-margin="70px" @change="swiperChange">
				<swiper-item>
	<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode="" class="simg1" :class="index==0 ? 'active':'aStop'" ></image> 
					<text class="t1">0.00</text>
					<text class="t2">0.00</text>
					<text class="t3">0.00</text>
					<text class="t4">0.00</text>
					<button type="default" class="btn1" @click="chargeMoney">{{$t('money.swiper.etc')}}</button>
					<button type="default" class="btn2" @click="withdrawMoney">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode=""  class="simg1" :class="index==1 ? 'active':'aStop'"></image>
				<text class="t1">0.00</text>
				<text class="t2">0.00</text>
				<text class="t3">0.00</text>
				<text class="t4">0.00</text>
				<button type="default" class="btn1" @click="chargeMoney">{{$t('money.swiper.etc')}}</button>
				<button type="default" class="btn2" @click="withdrawMoney">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/money/swiper1.jpg" mode="" class="simg1" :class="index==2 ? 'active':'aStop'" ></image>
				<text class="t1">0.00</text>
				<text class="t2">0.00</text>
				<text class="t3">0.00</text>
				<text class="t4">0.00</text>
				<button type="default" class="btn1" @click="chargeMoney">{{$t('money.swiper.etc')}}</button>
				<button type="default" class="btn2" @click="withdrawMoney">{{$t('money.swiper.cash')}}</button>	
					</view>
				</swiper-item>
			</swiper>
			</view>
			<image class="weidengl" src="../../static/money/weidengl.png" mode=""></image>
			<view class="texts">您还没有登录，请登录后查看哦~</view>
			<button class="login" @click="goLogin">登录</button>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		data() {
			return {
				index:0,
				BTC:'',
				BHC:'',
				LTC:'',
			};
		},
		methods:{
			swiperChange(e){	
				this.index=e.detail.current;
				console.log(e.detail.current);
			},
			chargeMoney(){
				uni.showModal({
					title:'尚未登录，去登录？',
					success:res=>{
						console.log(res);
						if(res.confirm){
							uni.reLaunch({
								url:'../../pages/login/login'
							})
						}
					}
				})
				
			},
			withdrawMoney(){
				
				uni.showModal({
					title:'尚未登录，去登录？',
					success:res=>{
						console.log(res);
						if(res.confirm){
							uni.reLaunch({
								url:'../../pages/login/login'
							})
						}
					}
				})
			},
			goLogin(){
				uni.reLaunch({
					url:'../../pages/login/login'
				})
			}
		},
		created() {
			
			
		}
	}
</script>

<style scoped>
	.heads{
		background: linear-gradient(to bottom, #DCEAFF 0%, #FFFFFF 100%);
	}
	 .swiper1{
		 width: 100%;
		margin: 20rpx;
		margin-bottom: 60rpx;
	}
	.swiper1>.swiper-item{
		width: 100%;
		height: 140rpx;
		position: relative;
	}
	.swiper-item>text{
		font-size: .7em;
		font-weight: 550;
	}
	.swiper-item>text:nth-of-type(1){
		position: absolute;
		top: 24rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(2){
		position: absolute;
		top: 76rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(3){
		position: absolute;
		top: 126rpx;
		left: 220rpx;
	}
	.swiper-item>text:nth-of-type(4){
		position: absolute;
		top: 174rpx;
		left: 220rpx;
	}
	.btn1{
		height: 40rpx;
		font-size: .5em;
		line-height: 40rpx;
		background-color: #F05B34;
		position: absolute;
		right: 30rpx;
		top: 60rpx;
	}
	.btn2{
		height: 40rpx;
		font-size: .6em;
		line-height: 40rpx;
		background-color: #FFFFFF;
		position: absolute;
		right: 30rpx;
		top: 120rpx;
	}
	.simg1{
		width: 494rpx;
		height: 200rpx;
		position: absolute;
		left: 50rpx;
		z-index: -1;
	} 
	.aStop{
		position: relative;
		top: 20rpx;
		width: 84%;
	}
	 .active{
		width: 100%;
		height: 240rpx;
		position: absolute;
		left: 0;
	}
	h3{
		text-align: center;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		margin-bottom: 40rpx;
	}
	.weidengl{
		width: 346rpx;
		height: 174rpx;
		padding-top: 218rpx;
		padding-left: calc(50% - 173rpx);
	}
	.texts{
		padding-top: 42rpx;
		color: #717171;
		font-size: 24rpx;
		text-align: center;
	}
	.login{
		margin:32rpx auto;
		width: 110rpx;
		height: 54rpx;
		background: #207DFE;
		box-shadow: 0px 2px 7px rgba(216, 216, 216, 0.17);
		opacity: 1;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: 400;
		line-height: 48rpx;
	}
</style>

